<template>
  <view class="replenish">
    <view class="item">
      <image :src="goodDetail.productImage"></image>
      <view class="itemInfo">
        <view class="">{{ goodDetail.productName }}</view>
        <view class="money">
          <view class="">补货价:￥{{ goodDetail.replenishmentPrice }}</view>
          <view class="">利润:￥{{ goodDetail.profit }}</view>
        </view>
      </view>
    </view>
    <uni-forms
      class="uniForms"
      ref="valiForm"
      label-width="150px"
      :rules="rules"
      :modelValue="valiFormData"
    >
      <uni-forms-item label="提货数量:" required name="goodTotal">
        <uni-easyinput
          v-model="valiFormData.goodTotal"
          placeholder="请输入提货数量"
        />
      </uni-forms-item>
    </uni-forms>
    <view class="bottom">
      <button type="default" class="black" @click="confirm" :plain="true">
        确定
      </button>
    </view>
    <!-- 支付弹窗 -->
    <PaymentPopup
      :show="paymentPopupShow"
      :isCountDown="false"
      source="cloud"
      :price="payAmount"
      :orderId="id"
      @close="popupClose"
      @submit="popupSubmit"
    />
  </view>
</template>

<script>
import mineApi from "@/api/mine";
import payApi from "@/api/pay";
import PaymentPopup from "@/components/payment-popup/index";
import { numberMul } from "@/utils/index";

export default {
  components: {
    PaymentPopup,
  },
  data() {
    return {
      goodId: null,
      goodDetail: {},
      valiFormData: {
        goodTotal: "",
      },
      rules: {
        goodTotal: {
          rules: [
            {
              required: true,
              errorMessage: "数量不能为空",
            },
            {
              format: "number",
              errorMessage: "数量只能输入数字",
            },
          ],
        },
      },
      paymentPopupShow: false,
      payAmount: 0,
      id: null, // 补货订单id
    };
  },
  onLoad(options) {
    this.goodId = options.id;
    this.getCommodityDetails();
  },
  onShow() {
    // 查询订单支付状态-第三方平台
    this.getOrderPayStatus(this.id);
  },
  methods: {
    getOrderPayStatus(id) {
      let params = {
        id,
      };
      payApi.getOrderPayStatus(params).then((res) => {
        let msg = JSON.parse(res.msg);
        if (msg.code == 0) {
          let data = JSON.parse(msg.data);
          if (data.status == 1) {
            uni.showLoading({
              title: "查询支付结果中···",
              mask: true,
            });
            mineApi
              .cloudPurchase({
                payType: 2,
                goodId: this.goodId,
                goodNum: this.valiFormData.goodTotal,
              })
              .then((result) => {
                if (result.code == 200) {
                  uni.hideLoading();
                  uni.showToast({
                    title: "支付成功",
                    icon: "none",
                    mask: true,
                  });
                  this.popupClose();
                  setTimeout(() => {
                    uni.navigateBack();
                  }, 1500);
                }
              });
          }
        }
      });
    },
    getCommodityDetails() {
      let data = {
        goodId: this.goodId,
      };
      mineApi.getCommodityDetails(data).then((res) => {
        if (res.code == 200) {
          this.goodDetail = res.data;
        }
      });
    },
    confirm() {
      this.$refs["valiForm"]
        .validate()
        .then((res) => {
          this.payAmount = numberMul(
            this.valiFormData.goodTotal,
            this.goodDetail.replenishmentPrice
          );
          this.id = Date.now();
          this.paymentPopupShow = true;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    popupClose() {
      this.paymentPopupShow = false;
    },
    popupSubmit(e) {
      uni.showLoading({
        title: "正在支付···",
        mask: true,
      });
      if (e.payType == 1) {
        // 余额支付
        let data = {
          payCode: e.payCode,
          payType: e.payType,
          goodId: this.goodId,
          goodNum: this.valiFormData.goodTotal,
        };
        mineApi.cloudPurchase(data).then((result) => {
          if (result.code == 200) {
            uni.hideLoading();
            uni.showToast({
              title: "支付成功！",
              icon: "none",
            });
            this.popupClose();
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.replenish {
  width: 100%;
  height: 100%;
  padding: 0 16px;
  background-color: #fff;

  .item {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;

    image {
      width: 65px;
      height: 65px;
    }

    .itemInfo {
      width: calc(100% - 90px);
      color: #000;
      font-weight: 500;
      display: flex;
      flex-direction: column;
      height: 65px;
      justify-content: space-between;
      margin-left: 10px;
      font-size: 17px;
      .money {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
  }

  /deep/ .uni-forms-item {
    display: flex;
    flex-direction: column;
  }
  .specifications {
    width: 100%;
    padding: 0 10rpx;

    .specificationsi {
      width: 100%;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;

        image {
          width: 40rpx;
          height: 40rpx;
        }
        .text {
          margin-left: 10rpx;
        }
      }

      .right {
        width: 40rpx;
        height: 40rpx;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }

  .bottom {
    border-top: 1px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150rpx;
    position: absolute;
    bottom: 0;
    left: 0;

    .black {
      background-color: #000;
      color: #fff;
      border-radius: 25px;
      width: 80%;
    }
  }
}
</style>
